import React, {
    Component
} from 'react';
import {
    Button,
    Image,
    View,
    Text,
    StyleSheet,
    Dimensions,
    FlatList,
    TouchableOpacity
} from 'react-native';
import color from '../../macro/color';
import SettingPage from './settings';
import AppointmentPage from './appointment';
import CollectPage from './collect';
import OrderPage from './order';
import PointPage from './point';
import PromotionPage from './promotion';
import NavBar from "../../common/NavBar";


// type Props = {};
export default class MinePage extends Component {
    static navigationOptions = {
        headerTitle:'我的',
    };

    render() {
        return (
            <View style={styles.container_mine}>
                <NavBar title={'我的'}/>
                <FlatList
                    data={[
                        {title_image: require('../../image/mine/订单查询.png'), title_name: '正在热映'},
                        {title_image: require('../../image/mine/收藏.png'), title_name: 'Top250'},
                        {title_image: require('../../image/mine/我的推广.png'), title_name: '我的推广'},
                        {title_image: require('../../image/mine/预约查询.png'), title_name: '预约查询'},
                        {title_image: require('../../image/mine/积分兑换.png'), title_name: '积分兑换'},
                        {title_image: require('../../image/mine/设置.png'), title_name: '设置'}
                    ]}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                    ItemSeparatorComponent={this._separator}
                    ListHeaderComponent={this._renderHeader}
                />
            </View>
        );
    };
    _renderItem = ({item, index}) => (
        <TouchableOpacity activeOpacity={0.5} onPress={this._onPress.bind(this,item,index)}>
            <View style={styles.item}>
                <View style={{flex: 1,  alignItems: 'center', flexDirection: 'row'}}>
                    <Image style={styles.item_image} source={item.title_image}/>
                    <Text style={styles.item_text}>{item.title_name}</Text>
                </View>
                <View style={{flex: 1,alignItems: 'center', flexDirection: 'row',justifyContent: 'flex-end'}}>
                    <Image style={[styles.item_next]} source={require('../../image/mine/进入.png')}/>
                </View>

            </View>
        </TouchableOpacity>
    );
    _renderHeader() {
        return (
            <View>
                <View style={styles.header_view}></View>
                <View style={styles.order_view}></View>
                <View style={styles.line_view}></View>
            </View>
        )
    }
    _keyExtractor = (item, index) => index;
    _separator = () => {
        return <View style={styles.item_separator}/>
    };
    _onPress(item, index) {

        const pageArray = ['OrderPage','CollectPage','PromotionPage','AppointmentPage','PointPage','SettingPage']
        this.props.navigation.navigate(pageArray[index])
    }

}

const styles = StyleSheet.create({

    container_mine: {
        flex: 1,
        backgroundColor: color.view_background,
    },
    header_view: {
        width: Dimensions.get('window').width,
        height: 150,
        backgroundColor: color.white
    },
    order_view: {
        width: Dimensions.get('window').width,
        height: 100,
        marginTop: 10,
        backgroundColor: color.white,
    },
    line_view: {
        height: 10,
        backgroundColor: color.view_background,
    },
    item: {
        height: 45,
        backgroundColor: color.white,
        flexDirection: 'row',
        paddingHorizontal: 10,
    },
    item_separator: {
        height: 0.5,
        backgroundColor: color.line,
    },
    item_image: {
        width: 18,
        height: 18,
        marginLeft: 12,
        resizeMode: 'contain'
    },
    item_text: {
        marginLeft: 10,
        fontSize: 16,
        color: color.color333
    },
    item_next: {
        width: 10,
        height: 13.75,
    }
});